<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>科技风</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		html,body{
			background: #404040;
		}
		div{
			position: relative;
			width: 300px;
			height:50px;
			margin:300px auto;
			background: white;
		}
		input{
			padding-left: 10px;
			width: 100%;
			height: 100%;
			outline: none;
			font-size: 25px;
			border:none;
			box-sizing: border-box;
			background: #404040;
			color: #61dafb;
		}
		input:focus ~ .right{
			transform: scaleY(1);
			transform-origin: bottom center;
		}
		input:focus ~ .left{
			transform: scaleY(1);
			transform-origin: top center;
		}
		input:focus ~ .top{
			transform: scaleX(1);
			transform-origin: right center;
		}
		span{
			position: absolute;
			box-sizing: border-box;
			border: 2px solid #61dafb ;
			background: #61dafb;
			transition: transform .5s ease-in-out;
		}
		.left{
			top: 0;
			left: 0;
			height: 100%;
			width: 3px;
			transform: scaleY(0);
			transform-origin: bottom center;
			transition-delay: .3s;
		}
		.top{
			top: 0;
			left: 0;
			height: 3px;
			width: 100%;
			transform: scaleX(0);
			transform-origin: left center;
			transition-delay: .1s;
		}
		.right{
			top: 0;
			right: 0;
			height: 100%;
			width: 3px;
			transform: scaleY(0);
			transform-origin: top center;
			transition-delay: .2s;
		}
		.bottom{
			bottom: 0;
			right: 0;
			height: 3px;
			width: 100%;
		}
		input::placeholder{
			color:#61dafb;
		}
	</style>
</head>
<body>
	<div>
		<input type="text" name="" id="" value="" placeholder="输入内容" />
		<span class="left"></span>
		<span class="top"></span>
		<span class="right"></span>
		<span class="bottom"></span>
	</div>
</body>
</html>
